/*
 Navicat Premium Data Transfer

 Source Server         : houdun
 Source Server Type    : MySQL
 Source Server Version : 50542
 Source Host           : localhost
 Source Database       : blog_edu

 Target Server Type    : MySQL
 Target Server Version : 50542
 File Encoding         : utf-8

 Date: 03/02/2016 21:54:34 PM
*/

SET NAMES utf8;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
--  Table structure for `article`
-- ----------------------------
DROP TABLE IF EXISTS `article`;
CREATE TABLE `article` (
  `aid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `title` char(150) NOT NULL DEFAULT '',
  `click` mediumint(8) unsigned NOT NULL DEFAULT '0' COMMENT '点击次数',
  `sendtime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '发布时间',
  `updatetime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '修改时间',
  `thumb` varchar(255) NOT NULL DEFAULT '' COMMENT '缩略图',
  `digest` varchar(255) NOT NULL DEFAULT '' COMMENT '摘要',
  `author` varchar(20) NOT NULL DEFAULT '' COMMENT '作者',
  `user_uid` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '所属用户uid',
  `category_cid` smallint(5) unsigned NOT NULL DEFAULT '0' COMMENT '所属分类cid',
  `is_recycle` tinyint(1) NOT NULL DEFAULT '0',
  PRIMARY KEY (`aid`),
  KEY `fk_article_user_idx` (`user_uid`),
  KEY `fk_article_category1_idx` (`category_cid`)
) ENGINE=MyISAM AUTO_INCREMENT=27 DEFAULT CHARSET=utf8 COMMENT='文章表';

-- ----------------------------
--  Records of `article`
-- ----------------------------
BEGIN;
INSERT INTO `article` VALUES ('16', '苦逼法国留学生的桌子', '83', '1451868055', '1451880328', 'Upload/20681451868055_thumb.jpg', '法国留学多年，看【晒桌面】那么火，我也来凑个热闹，5S 出图。喜欢简洁的桌面，大家看得出，学渣桌子上只有几本装B的杂志，没事听听歌，现有 BOSE 小音箱一个（第一代 Bose soundlink mini）,耳放一个，森海塞尔（HD598 打折时候买的相对国内很便宜），电脑 13 PRO，平时经常帮同学做视频，爱摄影，故上传图 3，最爱的几个软件。', 'ARKIN', '2', '19', '0'), ('19', '手机移动端WEB资源整合', '102', '1451869441', '0', 'Upload/18601451869441_thumb.jpg', '2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。', 'ARKIN', '2', '18', '0'), ('17', '生活不能没有小创意！', '33', '1451868282', '1451868701', 'Upload/48631451868282_thumb.jpg', '    其实，原来已经晒过桌面了，虽然获得版主大人的肯定，得了个二等奖，但是那时候的桌面拥挤不堪，很多自己的想法没办法实现，现在不一样啦，改造了不少，哈哈，添置了不少东西，一一说来~', 'arkin', '2', '19', '0'), ('18', '华为P8随拍海南儋州热带植物园', '35', '1451868511', '1451868838', 'Upload/61591451868511_thumb.jpg', '我觉得生活的本质都是美的，它美在方方面面.而摄影不过是刚好把这些浮光掠影捕捉起来，装进照片里，装进满是回忆的故事里...', '艾尔肯', '2', '19', '0'), ('20', 'WeUI 发布——微信官方UI库', '3', '1451869807', '0', 'Upload/96111451869807_thumb.jpg', '团队里的几个小伙子把微信里面web app的UI，按照设计规范给梳理了一遍，并将之开源了出来。\r\n\r\n主要是希望给到第三方开发者一些UI和前端编码方面的指引和参考。目前已加入以下组件：', 'ARKIN', '2', '21', '0'), ('21', '完美设计需要的10个技巧', '2', '1451870737', '0', 'Upload/40741451870737_thumb.jpg', '身为用户体验设计师，回归对艺术设计的热爱非常重要。尤其是当你寻找创意的时候。\r\n\r\n原因有很多。或许是我们工作节奏太快强度太高，精疲力竭。也可能是你身处一个抑制创意的环境，每天要与众多阻力抗争。也可能你不知不觉就成了一个循规蹈矩的执行者，一遍遍重复同样的工作。或者仅仅是你感到厌倦了。', 'ARKIN', '2', '20', '0'), ('22', '打造优质WEB表单的9个方法！', '6', '1451871205', '1451874499', 'Upload/63021451874499_thumb.png', '37.2度体验：这篇文章算是笔者交的一份读书笔记，与 CRM 系统打交道了这么久，表单天天见。如果表单有感情的话，我猜它应该都不想再看见我了。也是有缘，老板推荐了一本表单设计的书——《Web Form Design – Filling the blanks》by Luke Wroblewski，得此书如获至宝。该书对表单描述详尽，案例充分，解决了许多笔者多年未解决的问题。接下来进入正题，我们来聊一聊如何打造优质 Web 表单。黑喂狗！', 'ARKIN', '2', '20', '0'), ('23', '优秀设计师必须知道的UI设计原则', '2', '1451872349', '1451873363', 'Upload/3161451873363_thumb.png', '界面清晰是UI设计的第一步，要想让用户喜欢你设计的UI，首先必须让用户认可它、知道怎么样使用它。让用户在使用时预期会发生什么，并方便地与它交互。', 'ARKIN', '2', '10', '0'), ('24', '一组大气磅礴的太空主题网站欣赏', '13', '1451873786', '0', 'Upload/13371451873786_thumb.png', '《火星救援》的热潮还未褪去，马上《星球大战7》又要上映了。其实即使没有这些电影，大家对于宇宙的热忱也从来没有降低过。人类自古就喜欢仰望头顶的天空，这样也解释了我们为何如此着迷于宇宙，行星、恒星、黑洞、星系、外星人、宇航员、卫星等等等等，它们总能吸引我们的目光。宇宙给人探索的欲望，当这些元素被加入到网页中之后，会增添更多的神秘感和不一样的生机。', 'ARKIN', '2', '21', '0'), ('25', '小物品的情结--耳机支架', '9', '1451901882', '0', 'Upload/22151451901882_thumb.jpg', '前段时间，我入手了一只魅族 HD50 头戴式耳机，但是不免遇到了一个问题：头戴式耳机往哪儿摆。头戴式的耳机体积不免是大了一些，直接平摆在桌子上非常占位置，有时回到家使用就会占据我小桌子的很大空间。因此，我决定给它配一个耳机的支架。', 'ARKIN', '2', '19', '0'), ('26', '把桌面整理了一下，各个角度拍了几张', '36', '1451902374', '1451902512', 'Upload/76411451902512_thumb.jpg', '继上次晒完桌面后，再晒晒我的书架吧，以下是全景图；这架子是某宝买的，自己手工装的，当时差点没累死，一度后悔\r\n要退货，还好最后装上了。', 'ARKIN', '2', '19', '0');
COMMIT;

-- ----------------------------
--  Table structure for `article_data`
-- ----------------------------
DROP TABLE IF EXISTS `article_data`;
CREATE TABLE `article_data` (
  `keywords` varchar(255) NOT NULL DEFAULT '' COMMENT '关键字seo',
  `des` varchar(255) NOT NULL DEFAULT '' COMMENT '文章描述 seo',
  `content` text COMMENT '文章内容',
  `article_aid` int(10) unsigned NOT NULL,
  KEY `fk_article_data_article1_idx` (`article_aid`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='文章数据表';

-- ----------------------------
--  Records of `article_data`
-- ----------------------------
BEGIN;
INSERT INTO `article_data` VALUES ('', '', '<p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong style=\"box-sizing: border-box;\">H5页面窗口自动调整到设备宽度，并禁止用户缩放页面</strong></p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&quot;&nbsp;/&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong style=\"box-sizing: border-box;\">忽略将页面中的数字识别为电话号码</strong></p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;meta&nbsp;name=&quot;format-detection&quot;&nbsp;content=&quot;telephone=no&quot;&nbsp;/&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong style=\"box-sizing: border-box;\">忽略Android平台中对邮箱地址的识别</strong></p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;meta&nbsp;name=&quot;format-detection&quot;&nbsp;content=&quot;email=no&quot;&nbsp;/&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong style=\"box-sizing: border-box;\">当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari</strong></p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;meta&nbsp;name=&quot;apple-mobile-web-app-capable&quot;&nbsp;content=&quot;yes&quot;&nbsp;/&gt;&lt;!--&nbsp;ios7.0版本以后，safari上已看不到效果&nbsp;--&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong style=\"box-sizing: border-box;\">将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式</strong></p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;meta&nbsp;name=&quot;apple-mobile-web-app-status-bar-style&quot;&nbsp;content=&quot;black&quot;&nbsp;/&gt;&lt;!--&nbsp;可选default、black、black-translucent&nbsp;--&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong style=\"box-sizing: border-box;\">viewport模板</strong><br style=\"box-sizing: border-box;\"/>viewport模板——通用</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;!DOCTYPE&nbsp;html&gt;&lt;html&gt;&lt;head&gt;&lt;meta&nbsp;charset=&quot;utf-8&quot;&gt;&lt;meta&nbsp;content=&quot;width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no&quot;&nbsp;name=&quot;viewport&quot;&gt;&lt;meta&nbsp;content=&quot;yes&quot;&nbsp;name=&quot;apple-mobile-web-app-capable&quot;&gt;&lt;meta&nbsp;content=&quot;black&quot;&nbsp;name=&quot;apple-mobile-web-app-status-bar-style&quot;&gt;&lt;meta&nbsp;content=&quot;telephone=no&quot;&nbsp;name=&quot;format-detection&quot;&gt;&lt;meta&nbsp;content=&quot;email=no&quot;&nbsp;name=&quot;format-detection&quot;&gt;&lt;title&gt;标题&lt;/title&gt;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;index.css&quot;&gt;&lt;/head&gt;&lt;body&gt;这里开始内容&lt;/body&gt;&lt;/html&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">viewport模板 – target-densitydpi=device-dpi，android 2.3.5以下版本不支持</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;!DOCTYPE&nbsp;html&gt;&lt;html&gt;&lt;head&gt;&lt;meta&nbsp;charset=&quot;utf-8&quot;&gt;&lt;meta&nbsp;name=&quot;viewport&quot;&nbsp;content=&quot;width=750,&nbsp;user-scalable=no,&nbsp;target-densitydpi=device-dpi&quot;&gt;&lt;!--&nbsp;width取值与页面定义的宽度一致&nbsp;--&gt;&lt;meta&nbsp;content=&quot;yes&quot;&nbsp;name=&quot;apple-mobile-web-app-capable&quot;&gt;&lt;meta&nbsp;content=&quot;black&quot;&nbsp;name=&quot;apple-mobile-web-app-status-bar-style&quot;&gt;&lt;meta&nbsp;content=&quot;telephone=no&quot;&nbsp;name=&quot;format-detection&quot;&gt;&lt;meta&nbsp;content=&quot;email=no&quot;&nbsp;name=&quot;format-detection&quot;&gt;&lt;title&gt;标题&lt;/title&gt;&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;href=&quot;index.css&quot;&gt;&lt;/head&gt;&lt;body&gt;这里开始内容&lt;/body&gt;&lt;/html&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">参考案例：<a href=\"http://action.weixin.qq.com/payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl\" target=\"_blank\" style=\"box-sizing: border-box; color: rgb(102, 102, 102); transition: all 0.25s; background: transparent;\">http://action.weixin.qq.com/payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl</a></p><h2 style=\"box-sizing: border-box; font-family: &#39;Microsoft Yahei&#39;; line-height: 1.1; color: rgb(85, 85, 85); margin: 18px 0px; font-size: 18px; padding: 10px 0px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: rgb(234, 234, 234); white-space: normal; background-color: rgb(255, 255, 255);\">常见问题</h2><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong style=\"box-sizing: border-box;\">移动端如何定义字体font-family</strong><br style=\"box-sizing: border-box;\"/>中文字体使用系统默认即可，英文用Helvetica</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">/*&nbsp;移动端定义字体的代码&nbsp;*/body{font-family:Helvetica;}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">参考《<a href=\"http://www.cnblogs.com/PeunZhang/p/3592096.html\" target=\"_blank\" style=\"box-sizing: border-box; color: rgb(102, 102, 102); transition: all 0.25s; background: transparent;\">移动端使用字体的思考</a>》</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong style=\"box-sizing: border-box;\">移动端字体单位font-size选择px还是rem</strong><br style=\"box-sizing: border-box;\"/>对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">rem配置参考：</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">html{font-size:10px}@media&nbsp;screen&nbsp;and&nbsp;(min-width:321px)&nbsp;and&nbsp;(max-width:375px){html{font-size:11px}}@media&nbsp;screen&nbsp;and&nbsp;(min-width:376px)&nbsp;and&nbsp;(max-width:414px){html{font-size:12px}}@media&nbsp;screen&nbsp;and&nbsp;(min-width:415px)&nbsp;and&nbsp;(max-width:639px){html{font-size:15px}}@media&nbsp;screen&nbsp;and&nbsp;(min-width:640px)&nbsp;and&nbsp;(max-width:719px){html{font-size:20px}}@media&nbsp;screen&nbsp;and&nbsp;(min-width:720px)&nbsp;and&nbsp;(max-width:749px){html{font-size:22.5px}}@media&nbsp;screen&nbsp;and&nbsp;(min-width:750px)&nbsp;and&nbsp;(max-width:799px){html{font-size:23.5px}}@media&nbsp;screen&nbsp;and&nbsp;(min-width:800px){html{font-size:25px}}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong style=\"box-sizing: border-box;\">移动端touch事件(区分webkit 和 winphone)</strong><br style=\"box-sizing: border-box;\"/>当用户手指放在移动设备在屏幕上滑动会触发的touch事件</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">以下支持webkit</p><ul style=\"box-sizing: border-box; margin-bottom: 18px; margin-left: 46px; padding: 0px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\" class=\" list-paddingleft-2\"><li><p>touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指</p></li><li><p>touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动</p></li><li><p>touchend——当手指离开屏幕时触发</p></li><li><p>touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用</p></li></ul><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">TouchEvent</p><ul style=\"box-sizing: border-box; margin-bottom: 18px; margin-left: 46px; padding: 0px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\" class=\" list-paddingleft-2\"><li><p>touches：屏幕上所有手指的信息</p></li><li><p>targetTouches：手指在目标区域的手指信息</p></li><li><p>changedTouches：最近一次触发该事件的手指信息</p></li><li><p>touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息</p></li></ul><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">参数信息(changedTouches[0])</p><ul style=\"box-sizing: border-box; margin-bottom: 18px; margin-left: 46px; padding: 0px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\" class=\" list-paddingleft-2\"><li><p>clientX、clientY在显示区的坐标</p></li><li><p>target：当前元素</p></li></ul><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">参考：https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">以下支持winphone 8</p><ul style=\"box-sizing: border-box; margin-bottom: 18px; margin-left: 46px; padding: 0px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\" class=\" list-paddingleft-2\"><li><p>MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指</p></li><li><p>MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动</p></li><li><p>MSPointerUp——当手指离开屏幕时触发</p></li></ul><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">移动端click屏幕产生200-300 ms的延迟响应</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">以下是历史原因，来源一个公司内一个同事的分享：</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">2007年苹果发布首款iphone上IOS系统搭载的safari为了将适用于PC端上大屏幕的网页能比较好的展示在手机端上，使用了双击缩放(double tap to zoom)的方案，比如你在手机上用浏览器打开一个PC上的网页，你可能在看到页面内容虽然可以撑满整个屏幕，但是字体、图片都很小看不清，此时可以快速双击屏幕上的某一部分，你就能看清该部分放大后的内容，再次双击后能回到原始状态。</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">双击缩放是指用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">原因就出在浏览器需要如何判断快速点击上，当用户在屏幕上单击某一个元素时候，例如跳转链接&lt;a href=”#”&gt;&lt;/a&gt;，此处浏览器会先捕获该次单击，但浏览器不能决定用户是单纯要点击链接还是要双击该部分区域进行缩放操作，所以，捕获第一次单击后，浏览器会先Hold一段时间t，如果在t时间区间里用户未进行下一次点击，则浏览器会做单击跳转链接的处理，如果t时间里用户进行了第二次单击操作，则浏览器会禁止跳转，转而进行对该部分区域页面的缩放操作。那么这个时间区间t有多少呢？在IOS safari下，大概为300毫秒。这就是延迟的由来。造成的后果用户纯粹单击页面，页面需要过一段时间才响应，给用户慢体验感觉，对于web开发者来说是，页面js捕获click事件的回调函数处理，需要300ms后才生效，也就间接导致影响其他业务逻辑的处理。</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">解决方案：</p><ul style=\"box-sizing: border-box; margin-bottom: 18px; margin-left: 46px; padding: 0px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\" class=\" list-paddingleft-2\"><li><p>fastclick可以解决在手机上点击事件的300ms延迟</p></li><li><p>zepto的touch模块，tap事件也是为了解决在click的延迟问题</p></li></ul><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">触摸事件的响应顺序</p><ol style=\"box-sizing: border-box; margin-bottom: 18px; margin-left: 46px; padding: 0px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\" class=\" list-paddingleft-2\"><li><p>ontouchstart</p></li><li><p>ontouchmove</p></li><li><p>ontouchend</p></li><li><p>onclick</p></li></ol><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">解决300ms延迟的问题，也可以通过绑定ontouchstart事件，加快对事件的响应</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong style=\"box-sizing: border-box;\">什么是Retina 显示屏，带来了什么问题</strong><br style=\"box-sizing: border-box;\"/>retina：一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素点1个变为4个</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">在高清显示屏中的位图被放大，图片会变得模糊，因此移动端的视觉稿通常会设计为传统PC的2倍</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">那么，前端的应对方案是：</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">设计稿切出来的图片长宽保证为偶数，并使用backgroud-size把图片缩小为原来的1/2</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">//例如图片宽高为：200px*200px，那么写法如下</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">.css{width:100px;height:100px;background-size:100px&nbsp;100px;}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">其它元素的取值为原来的1/2，例如视觉稿40px的字体，使用样式的写法为20px</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">.css{font-size:20px}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">参考《<a href=\"http://www.cnblogs.com/PeunZhang/p/3441110.html\" target=\"_blank\" style=\"box-sizing: border-box; color: rgb(102, 102, 102); transition: all 0.25s; background: transparent;\">高清显示屏原理及设计方案</a>》</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">a,button,input,textarea{-webkit-tap-highlight-color:&nbsp;rgba(0,0,0,0;)}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">部分android系统中元素被点击时产生的边框怎么去掉</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">a,button,input,textarea{-webkit-tap-highlight-color:&nbsp;rgba(0,0,0,0;)-webkit-user-modify:read-write-plaintext-only;}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">-webkit-user-modify有个副作用，就是输入法不再能够输入多个字符</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">另外，有些机型去除不了，如小米2</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">对于按钮类还有个办法，不使用a或者input标签，直接用div标签</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">参考《<a href=\"http://xn--androida-r39lv4co2cc0ykjse41cb1as71mo7ee4zt11g931a/\" target=\"_blank\" style=\"box-sizing: border-box; color: rgb(102, 102, 102); transition: all 0.25s; background: transparent;\">如何去除android上a标签产生的边框</a>》</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;meta&nbsp;name=&quot;msapplication-tap-highlight&quot;&nbsp;content=&quot;no&quot;&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">webkit表单元素的默认外观怎么重置</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">.css{-webkit-appearance:none;}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">webkit表单输入框placeholder的颜色值能改变么</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">input::-webkit-input-placeholder{color:#AAAAAA;}input:focus::-webkit-input-placeholder{color:#EEEEEE;}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">webkit表单输入框placeholder的文字能换行么<br style=\"box-sizing: border-box;\"/>ios可以，android不行~</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">在textarea标签下都可以换行~</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">IE10（winphone8）表单元素默认外观如何重置<br style=\"box-sizing: border-box;\"/>禁用 select 默认下拉箭头</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">::-ms-expand 适用于表单选择控件下拉箭头的修改，有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">select::-ms-expand&nbsp;{display:&nbsp;none;}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">禁用 radio 和 checkbox 默认样式</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">::-ms-check 适用于表单复选框或单选按钮默认图标的修改，同样有多个属性值，设置它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{display:&nbsp;none;}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">禁用PC端表单输入框默认清除按钮</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">当表单文本输入框输入内容后会显示文本清除按钮，::-ms-clear 适用于该清除按钮的修改，同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{display:&nbsp;none;}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">禁止ios 长按时不触发系统的菜单，禁止ios&amp;android长按时下载图片</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">.css{-webkit-touch-callout:&nbsp;none}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">禁止ios和android用户选中文字</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">.css{-webkit-user-select:none}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">参考《<a href=\"http://www.cnblogs.com/PeunZhang/p/3522603.html\" target=\"_blank\" style=\"box-sizing: border-box; color: rgb(102, 102, 102); transition: all 0.25s; background: transparent;\">如何改变表单元素的外观(for Webkit and IE10)</a>》</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">打电话发短信写邮件怎么实现<br style=\"box-sizing: border-box;\"/>打电话</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;a&nbsp;href=&quot;tel:0755-10086&quot;&gt;打电话给:0755-10086&lt;/a&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">发短信，winphone系统无效</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;a&nbsp;href=&quot;sms:10086&quot;&gt;发短信给:&nbsp;10086&lt;/a&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">写邮件，可参考《<a href=\"http://www.cnblogs.com/PeunZhang/p/4952783.html\" target=\"_blank\" style=\"box-sizing: border-box; color: rgb(102, 102, 102); transition: all 0.25s; background: transparent;\">移动web页面给用户发送邮件的方法</a>》</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;a&nbsp;href=&quot;mailto:peun@foxmail.com&quot;&gt;peun@foxmail.com&lt;/a&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">模拟按钮hover效果<br style=\"box-sizing: border-box;\"/>移动端触摸按钮的效果，可明示用户有些事情正要发生，是一个比较好体验，但是移动设备中并没有鼠标指针，使用css的hover并不能满足我们的需求，还好国外有个激活css的active效果，代码如下，</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;!DOCTYPE&nbsp;html&gt;&lt;html&gt;&lt;head&gt;&lt;meta&nbsp;charset=&quot;utf-8&quot;&gt;&lt;meta&nbsp;content=&quot;width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no&quot;&nbsp;name=&quot;viewport&quot;&gt;&lt;meta&nbsp;content=&quot;yes&quot;&nbsp;name=&quot;apple-mobile-web-app-capable&quot;&gt;&lt;meta&nbsp;content=&quot;black&quot;&nbsp;name=&quot;apple-mobile-web-app-status-bar-style&quot;&gt;&lt;meta&nbsp;content=&quot;telephone=no&quot;&nbsp;name=&quot;format-detection&quot;&gt;&lt;meta&nbsp;content=&quot;email=no&quot;&nbsp;name=&quot;format-detection&quot;&gt;&lt;style&nbsp;type=&quot;text/css&quot;&gt;a{-webkit-tap-highlight-color:&nbsp;rgba(0,0,0,0);}.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color:&nbsp;#4185F3;}.btn-blue:active{background-color:&nbsp;#357AE8;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&nbsp;class=&quot;btn-blue&quot;&gt;按钮&lt;/div&gt;&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;document.addEventListener(&quot;touchstart&quot;,&nbsp;function(){},&nbsp;true)&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">兼容性ios5+、部分android 4+、winphone 8</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">要做到全兼容的办法，可通过绑定ontouchstart和ontouchend来控制按钮的类名</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;!DOCTYPE&nbsp;html&gt;&lt;html&gt;&lt;head&gt;&lt;meta&nbsp;charset=&quot;utf-8&quot;&gt;&lt;meta&nbsp;content=&quot;width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no&quot;&nbsp;name=&quot;viewport&quot;&gt;&lt;meta&nbsp;content=&quot;yes&quot;&nbsp;name=&quot;apple-mobile-web-app-capable&quot;&gt;&lt;meta&nbsp;content=&quot;black&quot;&nbsp;name=&quot;apple-mobile-web-app-status-bar-style&quot;&gt;&lt;meta&nbsp;content=&quot;telephone=no&quot;&nbsp;name=&quot;format-detection&quot;&gt;&lt;meta&nbsp;content=&quot;email=no&quot;&nbsp;name=&quot;format-detection&quot;&gt;&lt;style&nbsp;type=&quot;text/css&quot;&gt;a{-webkit-tap-highlight-color:&nbsp;rgba(0,0,0,0);}.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color:&nbsp;#4185F3;}.btn-blue-on{background-color:&nbsp;#357AE8;}&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div&nbsp;class=&quot;btn-blue&quot;&gt;按钮&lt;/div&gt;&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;var&nbsp;btnBlue&nbsp;=&nbsp;document.querySelector(&quot;.btn-blue&quot;);btnBlue.ontouchstart&nbsp;=&nbsp;function(){this.className&nbsp;=&nbsp;&quot;btn-blue&nbsp;btn-blue-on&quot;}btnBlue.ontouchend&nbsp;=&nbsp;function(){this.className&nbsp;=&nbsp;&quot;btn-blue&quot;}&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">屏幕旋转的事件和样式<br style=\"box-sizing: border-box;\"/>事件<br style=\"box-sizing: border-box;\"/>window.orientation，取值：正负90表示横屏模式、0和180表现为竖屏模式；</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">window.onorientationchange&nbsp;=&nbsp;function(){switch(window.orientation){case&nbsp;-90:case&nbsp;90:alert(&quot;横屏:&quot;&nbsp;+&nbsp;window.orientation);case&nbsp;0:case&nbsp;180:alert(&quot;竖屏:&quot;&nbsp;+&nbsp;window.orientation);break;}}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">样式</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">//竖屏时使用的样式@media&nbsp;all&nbsp;and&nbsp;(orientation:portrait)&nbsp;{.css{}}//横屏时使用的样式@media&nbsp;all&nbsp;and&nbsp;(orientation:landscape)&nbsp;{.css{}}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">audio元素和video元素在ios和andriod中无法自动播放<br style=\"box-sizing: border-box;\"/>应对方案：触屏即播</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">$(&#39;html&#39;).one(&#39;touchstart&#39;,function(){audio.play()})</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">可参考《<a href=\"http://www.cnblogs.com/PeunZhang/archive/2013/02/05/2893093.html\" target=\"_blank\" style=\"box-sizing: border-box; color: rgb(102, 102, 102); transition: all 0.25s; background: transparent;\">无法自动播放的audio元素</a>》</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">摇一摇功能<br style=\"box-sizing: border-box;\"/>HTML5 deviceMotion：封装了运动传感器数据的事件，可以获取手机运动状态下的运动加速度等数据。</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">手机拍照和上传图片<br style=\"box-sizing: border-box;\"/>&lt;input type=”file”&gt;的accept 属性</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">&lt;!--&nbsp;选择照片&nbsp;--&gt;&lt;input&nbsp;type=file&nbsp;accept=&quot;image/*&quot;&gt;&lt;!--&nbsp;选择视频&nbsp;--&gt;&lt;input&nbsp;type=file&nbsp;accept=&quot;video/*&quot;&gt;</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">使用总结：</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">ios 有拍照、录像、选取本地图片功能<br style=\"box-sizing: border-box;\"/>部分android只有选取本地图片功能<br style=\"box-sizing: border-box;\"/><br/></p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">/**\r\n*&nbsp;页面加入这段代码可使Android机器页面不再受到用户字体缩放强制改变大小\r\n*&nbsp;但是会有一个1秒左右的延迟，期间可以考虑通过loading展示\r\n*&nbsp;仅供参考\r\n*/(function(){if&nbsp;(typeof(WeixinJSBridge)&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{document.addEventListener(&quot;WeixinJSBridgeReady&quot;,&nbsp;function&nbsp;(e)&nbsp;{setTimeout(function(){WeixinJSBridge.invoke(&#39;setFontSizeCallback&#39;,{&quot;fontSize&quot;:0},&nbsp;function(res)&nbsp;{alert(JSON.stringify(res));});},0);});}&nbsp;else&nbsp;{setTimeout(function(){WeixinJSBridge.invoke(&#39;setFontSizeCallback&#39;,{&quot;fontSize&quot;:0},&nbsp;function(res)&nbsp;{alert(JSON.stringify(res));});},0);}})();</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">ios使用-webkit-text-size-adjust禁止调整字体大小</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">body{-webkit-text-size-adjust:&nbsp;100%!important;}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">最好的解决方案：</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">整个页面用rem或者百分比布局<br style=\"box-sizing: border-box;\"/>消除transition闪屏<br style=\"box-sizing: border-box;\"/>网络都是这么写的，但我并没有测试出来</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">.css{/*设置内嵌的元素在&nbsp;3D&nbsp;空间如何呈现：保留&nbsp;3D*/-webkit-transform-style:&nbsp;preserve-3d;/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/-webkit-backface-visibility:&nbsp;hidden;}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">开启硬件加速<br style=\"box-sizing: border-box;\"/>解决页面闪白<br style=\"box-sizing: border-box;\"/>保证动画流畅</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">.css&nbsp;{-webkit-transform:&nbsp;translate3d(0,&nbsp;0,&nbsp;0);-moz-transform:&nbsp;translate3d(0,&nbsp;0,&nbsp;0);-ms-transform:&nbsp;translate3d(0,&nbsp;0,&nbsp;0);transform:&nbsp;translate3d(0,&nbsp;0,&nbsp;0);}</pre><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">参考《<a href=\"http://www.cnblogs.com/PeunZhang/p/3510083.html\" target=\"_blank\" style=\"box-sizing: border-box; color: rgb(102, 102, 102); transition: all 0.25s; background: transparent;\">用CSS开启硬件加速来提高网站性能</a>》</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">取消input在ios下，输入的时候英文首字母的默认大写</p><pre class=\"prettyprint\" style=\"box-sizing: border-box; overflow: hidden; font-family: &#39;courier new&#39;; font-size: 12px; padding: 10px 15px; margin-top: 20px; margin-bottom: 20px; line-height: 20px; color: rgb(248, 248, 212); word-break: break-all; word-wrap: break-word; border: none; border-radius: 4px; font-stretch: normal; background-color: rgb(39, 40, 34);\">.css&nbsp;{-webkit-transform:&nbsp;translate3d(0,&nbsp;0,&nbsp;0);-moz-transform:&nbsp;translate3d(0,&nbsp;0,&nbsp;0);-ms-transform:&nbsp;translate3d(0,&nbsp;0,&nbsp;0);transform:&nbsp;translate3d(0,&nbsp;0,&nbsp;0);}</pre>', '19'), ('小DVD顺序', '水电费vs', '<p>水电费vs亲阿飞</p>', '2'), ('在V刹vs', 'vs给父vs', '<p>给父V手势分vs</p>', '3'), ('jhxv', 'jhxv', '<p>jhxv</p>', '4'), ('新疆', '新疆', '<p>新疆</p>', '5'), ('三季度v', '三季度v', '<p>三季度v</p>', '6'), ('笔记本', '笔记本', '<p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">法国留学多年，看【晒桌面】那么火，我也来凑个热闹，5S 出图。喜欢简洁的桌面，大家看得出，学渣桌子上只有几本装B的杂志，没事听听歌，现有 BOSE 小音箱一个（第一代 Bose soundlink mini）,耳放一个，森海塞尔（HD598 打折时候买的相对国内很便宜），电脑 13 PRO，平时经常帮同学做视频，爱摄影，故上传图 3，最爱的几个软件。</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"/Upload/ueditor/image/20160104/1451868045477167.jpg\" title=\"1451822297490838.jpg\" alt=\"【晒桌面】苦逼法国留学生的桌子\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/><img src=\"/Upload/ueditor/image/20160104/1451868046430431.jpg\" title=\"1451822296932671.jpg\" alt=\"【晒桌面】苦逼法国留学生的桌子\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in; font-family: sans-serif;\"/><span style=\"font-family: sans-serif;\"><img src=\"/Upload/ueditor/image/20160104/1451868047234411.jpg\" title=\"1451823612432352.png\" alt=\"【晒桌面】苦逼法国留学生的桌子\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></span></p><p style=\"text-align: center;\"><br/></p>', '16'), ('', '', '<p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp;其实，原来已经晒过桌面了，虽然获得版主大人的肯定，得了个二等奖，但是那时候的桌面拥挤不堪，很多自己的想法没办法实现，现在不一样啦，改造了不少，哈哈，添置了不少东西，一一说来~</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 1、键盘</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 键盘改成酷冷至尊极光键盘，并且更改了键帽，配了一个鸡翅木的腕托。</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp;<img src=\"http://img.zealer.com/690/0/60982007020033d9d4cc34cf1c4db70f3c9.jpg\" title=\"1451805293818629.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/>&nbsp; &nbsp;</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 2、电脑架</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 这个电脑架也淘了好久好久，最后优惠价进，质量很不错，造型也很好！上面imac，下面躲起来的是x61</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp;&nbsp;<img src=\"http://img.zealer.com/690/0/3f9ea00665dbd605b28294725331fecbafd.jpg\" title=\"1451805424530029.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/>&nbsp;</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 3、笔筒</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 其实现在有笔筒很少，自己一般一只笔足够了，所以自己就用一个长草的小瓶子作为笔筒，很有个性吧~</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp;&nbsp;<img src=\"http://img.zealer.com/690/0/e09b0004bfd3d65fb0551e6c6229723dbac.jpg\" title=\"1451805505997189.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 4、回形针、按钉收纳器</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 自己多少会用一些这些玩意儿，不过怎么造型才好看呢，哈哈，自己用一个小朋友的装糖的蛋，再加上一个小瓷盆，解决，造型还不错。</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp;&nbsp;<img src=\"http://img.zealer.com/690/0/1f971004730ec0fe565597a1c003608b3ae.jpg\" title=\"1451805707194169.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"http://img.zealer.com/690/0/d49c500aa18ea14fa24a6ad5489d1dc9711.jpg\" title=\"1451805962558732.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 5、猫头鹰和摆件</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp;&nbsp;<img src=\"http://img.zealer.com/690/0/1d944001b034efe8bc1345bdd6381fe6de8.jpg\" title=\"1451806005255237.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 7、桌面书架改造</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 买了4年的书架了，没啥用，扔了又舍不得，翻过来，上面放植物，下面放储物盒</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp;&nbsp;<img src=\"http://img.zealer.com/690/0/3d93b0043f775ca5fbb846c52550cfcb51b.jpg\" title=\"1451806096811767.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 8、乌龟箱和鱼缸</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 文艺青年嘛，养养乌龟，养养鱼，必备的！话说桌子，就是之前那个垃圾桌，哈哈！</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp;&nbsp;<img src=\"http://img.zealer.com/690/0/c49c000c18bf4edd78b7379a07fcf835fd8.jpg\" title=\"1451806194471124.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp;&nbsp;<img src=\"http://img.zealer.com/690/0/00956003351c8e1945c320022c069932e79.jpg\" title=\"1451806242229386.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/><img src=\"http://img.zealer.com/690/0/df900004a6cc7faadebd05ea603eb1cb995.jpg\" title=\"1451806281430028.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 9、软相框</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 这个也是文艺青年必备吧，哈哈</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp;&nbsp;<img src=\"http://img.zealer.com/690/0/6c9db00616d7c17d39b482be89e54f11cd0.jpg\" title=\"1451806519611423.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp; 10、全景各角度</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">&nbsp; &nbsp;&nbsp;<img src=\"http://img.zealer.com/690/0/2291b0037bba23c46ac5e139e67631545cd.jpg\" title=\"1451806609193517.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"http://img.zealer.com/690/0/079f4003d94a4f503849bb669a9d58de4b7.jpg\" title=\"1451806651631689.jpg\" alt=\"晒桌面！生活不能没有小创意！看看我的一些小创意吧！自然生态桌面！&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" style=\"border: 0px; max-width: 690px; margin: 25px 0px;\"/></p><p><br/></p>', '17');
INSERT INTO `article_data` VALUES ('', '', '<p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"/Upload/ueditor/image/20160104/1451868468570481.jpg\" title=\"1451053750727424.jpg\" alt=\"【手机叫板单反】华为P8随拍海南儋州热带植物园&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"/Upload/ueditor/image/20160104/1451868470517392.jpg\" title=\"1451053754104137.jpg\" alt=\"【手机叫板单反】华为P8随拍海南儋州热带植物园&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"http://img.zealer.com/690/0/c196200f6c6301b2546422b25ee32c26e6a.jpg\" title=\"1451053765183703.jpg\" alt=\"【手机叫板单反】华为P8随拍海南儋州热带植物园&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"/Upload/ueditor/image/20160104/1451868476426701.jpg\" title=\"1451053764882859.jpg\" alt=\"【手机叫板单反】华为P8随拍海南儋州热带植物园&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"/Upload/ueditor/image/20160104/1451868484142001.jpg\" title=\"1451053766869771.jpg\" alt=\"【手机叫板单反】华为P8随拍海南儋州热带植物园&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"/Upload/ueditor/image/20160104/1451868490364002.jpg\" title=\"1451053776769849.jpg\" alt=\"【手机叫板单反】华为P8随拍海南儋州热带植物园&lt;span class=&quot;globalIcons post_greatIcon&quot; title=&quot;精华帖&quot;&gt;&lt;/span&gt;\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p><br/></p>', '18'), ('', '', '<p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">团队里的几个小伙子把微信里面web app的UI，按照设计规范给梳理了一遍，并将之开源了出来。</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">主要是希望给到第三方开发者一些UI和前端编码方面的指引和参考。目前已加入以下组件：</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">button<br style=\"box-sizing: border-box;\"/>cell<br style=\"box-sizing: border-box;\"/>dialog<br style=\"box-sizing: border-box;\"/>toast<br style=\"box-sizing: border-box;\"/>article<br style=\"box-sizing: border-box;\"/>icon<br style=\"box-sizing: border-box;\"/>项目地址&nbsp;<a href=\"https://github.com/weui/weui\" target=\"_blank\" style=\"box-sizing: border-box; color: rgb(102, 102, 102); transition: all 0.25s; background: transparent;\">https://github.com/weui/weui</a></p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">手机预览：<br style=\"box-sizing: border-box;\"/><img class=\"alignnone size-full wp-image-6196\" src=\"/Upload/ueditor/image/20160104/1451869804766280.png\" alt=\"qrcode\" width=\"280\" height=\"280\" style=\"box-sizing: border-box; border: 0px; vertical-align: middle; margin: 0px auto; display: block; max-width: 100%; height: auto;\"/><br style=\"box-sizing: border-box;\"/>这里不多说，详细的使用方法和组件可以移步到github去了解。</p><p style=\"box-sizing: border-box; margin-top: 0px; margin-bottom: 18px; word-wrap: break-word; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;; font-size: 15px; line-height: 25px; white-space: normal; background-color: rgb(255, 255, 255);\">如果有任何疑问或者建议，可以在这里留言或者在项目中发起issues</p><p><br/></p>', '20'), ('', '', '<p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">身为用户体验设计师，回归对艺术设计的热爱非常重要。尤其是当你寻找创意的时候。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">原因有很多。或许是我们工作节奏太快强度太高，精疲力竭。也可能是你身处一个抑制创意的环境，每天要与众多阻力抗争。也可能你不知不觉就成了一个循规蹈矩的执行者，一遍遍重复同样的工作。或者仅仅是你感到厌倦了。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal; text-align: center;\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451870673891953.jpg\" alt=\"image00\" width=\"600\" height=\"601\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/image00.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">设计流程能让你自信满满地进行创新，因为创意的萌芽和演化是有迹可循的。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">你的流程不应该一成不变，每个项目都有其约束。无论是资源还是技能，你的设计流程都必须随着这些实实在在的制约而改变。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">下面，我依据自己职业生涯的亲身经历，整理出<strong>10条改善设计流程的建议</strong>。</p><h2 id=\"toc_0\" style=\"margin: 20px -20px 20px -24px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 18px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 18px; padding: 10px 20px 9px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(66, 139, 202); white-space: normal; background-color: rgb(251, 251, 251);\">1. 寻找解决方案之前，先确定问题</h2><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">爱因斯坦说过：“如果我有一小时来解决问题，我会花55分钟思考问题，5分钟思考解决方法。”</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">许多设计师都犯了致命错误，认为问题是显而易见的。多数时候，表面问题仅仅是根本问题的一种表现。找到真正的问题时你一定会有所觉悟，因为它同时会解决许多其他问题。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal; text-align: center;\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451870674112460.jpg\" alt=\"image01\" width=\"600\" height=\"468\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/image01.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">免费电子书网页UI最佳实践中提到，以“我们该如何……”作为设计项目的起点，开始设计的思索。牢记一点，首先要确保你在设计正确的产品，然后才是正确地设计产品。</p><h2 id=\"toc_1\" style=\"margin: 20px -20px 20px -24px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 18px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 18px; padding: 10px 20px 9px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(66, 139, 202); white-space: normal; background-color: rgb(251, 251, 251);\">2. 对用户了如指掌</h2><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">有个开发者曾经告诉我，她正在为“每个人”打造一款产品。这对于批量生产或许说得通，但如果不能精确指定某一类用户，就无法创造有意义的用户场景。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal; text-align: center;\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451870674495914.jpg\" alt=\"image02\" width=\"600\" height=\"377\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/image02.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">没有有意义的用户场景，就不知道你的MVP(最简形态产品)是什么，也不知道如何建立产品计划与策略。所有的产品都致力于解决某些微不足道的问题，对于需要它的人而言，这就简单易懂。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">发起用户调研，创建人物角色，开始制定用户情景与流程。任何能给用户留下更深刻印象的手段，都有助于将设计推向成功。</p><h2 id=\"toc_2\" style=\"margin: 20px -20px 20px -24px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 18px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 18px; padding: 10px 20px 9px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(66, 139, 202); white-space: normal; background-color: rgb(251, 251, 251);\">3. 思考极端的解决方案</h2><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">暂时逃离创意的困境，也是设计的乐趣之一。天马行空的机会总是值得歌颂。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">打破惯例恰恰对它有益。跳出单一策略思考，将用户一天的生活写在故事板上，看看有哪些可能发生的接触。撇开草稿，自由发挥。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal; text-align: center;\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451870674360540.jpg\" alt=\"image03\" width=\"600\" height=\"400\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/image03.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">别在这上面花上数周时间（除非你时间充足），但是一次创意的停歇能将你的潜意识与要解决的问题联系起来。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">看看Duolingo。这个应用感觉更像是一款手机游戏，而不是语言学习平台。这完全是无意识的，在理论上可能会受到质疑，但是数字证明了其价值——在2015年6月的Google Capital中，这家公司估值4.7亿美元。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">在你的行业外寻找灵感，设计方案的有效（及创意）会出乎你意料。</p><h2 id=\"toc_3\" style=\"margin: 20px -20px 20px -24px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 18px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 18px; padding: 10px 20px 9px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(66, 139, 202); white-space: normal; background-color: rgb(251, 251, 251);\">4. 设计之前，建立一个假设进行测试</h2><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">假设提供了一条寻找真理的道路。每个设计都要构建在某种坚实的基础上。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">把它想成是论文的论点，这就是设计的核心。早在开发工作之前，这里就是用户情景演绎的地方。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">尽可能多地头脑风暴各种情景，与你的团队在白板上分享。进行设计工作室练习，让参与者画出他们完成特定任务的方案。你得持续探索（并且迭代）你的假设，这是设计中的第一步。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">需要一套有用的框架流程，请看Maximilian Wambach（Ebay的交互设计）的方法。“如果[动作]那么[结果]，因为[用户有需求/遇到问题]”这样的思维模式极其有用。</p><h2 id=\"toc_4\" style=\"margin: 20px -20px 20px -24px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 18px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 18px; padding: 10px 20px 9px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(66, 139, 202); white-space: normal; background-color: rgb(251, 251, 251);\">5. 就最佳方案与不同人探讨</h2><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">如果你的设计是可靠的，那就要能经得起批评与讨论。来自不同背景、有不同经历的人，能为你指引更好的方案。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">可以考虑成立一个利益相关者的智囊团，让他们分享各自独特的视角，为你的设计提供改善建议。与你的设计主管一起，确保产品团队仍然有最终的决定权，否则你就会落入群众设计的陷阱。</p><h2 id=\"toc_5\" style=\"margin: 20px -20px 20px -24px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 18px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 18px; padding: 10px 20px 9px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(66, 139, 202); white-space: normal; background-color: rgb(251, 251, 251);\">6. 写文档创建一则故事</h2><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">产出一份讲述故事的文档。你设定的人物角色是其性格的缩影。使用场景是荧屏展示的关键部分，线框图是舞台，操作流程和用户流程是编舞，UI组件集则是舞台设计。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">所有相关元素都相互交融。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal; text-align: center;\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451870675351306.jpg\" alt=\"image06\" width=\"600\" height=\"146\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/image06.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">文档往往被忽略了，因为它缺乏环境。把你的设计资源与产出当成拼图，相互独立时价值甚微，拼接起来却成为一幅讲述故事的好画面。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">不要视野狭隘，过分沉迷于优化某一项设计文档。相反，要确保每份文档之间的关联简单易懂。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">精简那些无法推动设计前行的文档。如果文档没有用，就没有必要创建它。</p><h2 id=\"toc_6\" style=\"margin: 20px -20px 20px -24px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 18px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 18px; padding: 10px 20px 9px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(66, 139, 202); white-space: normal; background-color: rgb(251, 251, 251);\">7. 在纸上设计与测试</h2><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">任何阶段都可以进行快速的纸上原型设计，而且这对设计决策总有帮助。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">给自己或团队一定时间来迅速迭代创意。设计一旦以像素形式出现，就很容易对其过分依赖。而在纸上绘制原型能让你的大脑不断探索可能性。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal; text-align: center;\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451870675271455.jpg\" alt=\"image07\" width=\"600\" height=\"375\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/image07.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><em>照片来源：“App sketching”</em></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">绘制草图有利于探索创意，然后召集3-5人进行一场迅速的非正式可用性测试。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">一旦想到你认为可靠的设计，通过虚拟的操作流程对它进行测试。找个伙伴一起推演各种不同使用场景，你们可以相互提醒，避免遗漏和潜在的错误。一旦你的伙伴理解了这套设计的作用，在可用性测试过程中，他就能扮演“人肉计算机”的角色操作这些纸上原型。</p><h2 id=\"toc_7\" style=\"margin: 20px -20px 20px -24px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-weight: normal; line-height: 18px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 18px; padding: 10px 20px 9px; border-left-width: 4px; border-left-style: solid; border-left-color: rgb(66, 139, 202); white-space: normal; background-color: rgb(251, 251, 251);\">8. 将产出物贴在墙上</h2><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">在墙上贴大量的便签可能是陈词滥调了，但这么做确有非常正当的理由。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal; text-align: center;\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451870675194492.jpg\" alt=\"image08\" width=\"600\" height=\"424\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/image08.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><em>照片来源：Acquity Group的关系图</em></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">想想所有那些侦探剧。当侦探在探案时，墙壁就会变成犯罪地图。所有的证人与嫌犯，都与收集来的证据一起展示在上面。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">为特定用户设计时，也会发生同样的事情。就像侦探一样，用户体验设计师需要定位问题与用户之间的关联，然后将它直接连接到解决方案上。这些实际产出物不是用来展示的。团队有一个分享的地方，任何时间都能查看，有助于将用户体验方法灌输进每一个人的工作流程。</p><p><br/></p>', '21'), ('', '', '<p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">7.2度体验：这篇文章算是笔者交的一份读书笔记，与 CRM 系统打交道了这么久，<span class=\"wp_keywordlink_affiliate\">表单</span>天天见。如果<span class=\"wp_keywordlink_affiliate\">表单</span>有感情的话，我猜它应该都不想再看见我了。也是有缘，老板推荐了一本<span class=\"wp_keywordlink_affiliate\">表单设计</span>的书——《Web Form Design – Filling the blanks》by Luke Wroblewski，得此书如获至宝。该书对<span class=\"wp_keywordlink_affiliate\">表单</span>描述详尽，案例充分，解决了许多笔者多年未解决的问题。接下来进入正题，我们来聊一聊如何打造优质 Web 表单。黑喂狗！</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><strong>1. 标签推荐使用右对齐方式</strong></h4><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/1hh201611.jpg\" alt=\"1hh201611\" width=\"482\" height=\"314\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/1hh201611.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">（图示1：淘宝网注册页面）</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">马泰奥·彭佐在2006年7月的眼动研究发现，标签如果采用顶对齐方式，用户的视线从标签移动到输入框只需要50毫秒，右对齐方式需要240毫秒，左对齐方式需要500毫秒。如果从高效上讲，应该是优先考虑标签顶部对齐。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">我们再看淘宝注册页的表单采用了右对齐方式，是考虑到顶部对齐会占用过多的垂直空间，一旦表单项过多，对表单页的操作也会造成不便，所以采用了右对齐方式。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">所以笔者在此建议，如果表单项不多，有限考虑标签顶部对齐；而同时要兼顾高效和页面的垂直空间，则选择右对齐方式吧。那是不是左对齐标签无用呢？其实并不是，研究也有表明，在涉及到专业性过强，用户不熟悉的表单，需要更长时间理解的标签项时，则可以考虑左对齐方式。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><strong>2. 必填和选填</strong></h4><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">（图示2：必填VS选填）</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">本书里提出一个观点，如果必填字段比较多，把选填项标记出来则足够；如果选填字段比较多，则标记必填字段。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">这的确能最高效率区分出来必填字段和选填字段，然而现在大部分互联网用户对于「*」就代表必填这都已领会，所以笔者还是推荐在表单中尽可能用「*」去区分必填和选填，毕竟这属于最通用的方案。不过登录表单可以不遵循这个规则，大家都知道登录表单中的标签项都为必填，同时也可以根据标签项是否输入的状态来激活「登录」按钮。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><strong>3. 即时反馈</strong></h4><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">早期的表单里面对标签项的说明文字都直接放置在标签旁边，但很多用户不会去看这些文字，或者直接忽略掉。其实可以结合用户操作表单行为来动态显示帮助信息，例如用户聚焦在哪一个标签项，则显示哪一项对应的解释文案。腾讯微博注册页有一个细节做的比较好：</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">（图示3：腾讯微博注册页面）</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">当用户输入邮箱已经被注册过，则会即时给出相应的提示，节省用户输入额外注册信息的成本，而不是让用户填写完再点击「提交」按钮交给服务器去做一次判断。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">当然除了这条，还有密码强度和密码要求的即时校验，旨在节省用户输入时的思考时间，让用户更高效率地填写表单。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><strong>4. 错误消息</strong></h4><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">表单中的错误提示信息，或者一些不合规的提示信息展示也是<span class=\"wp_keywordlink_affiliate\">表单设计</span>中影响比较大的元素。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">（图示4：Error Message）</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">上图中的表单项就比较多，可能在小尺寸屏幕中需要滚动页面才能看到完整表单信息，而因为采用了点击「提交」按钮之后交给服务器校验数据，所以在多个表单项出现错误的情况下，则需要统一在表单头部提示出来错误信息，并且最好要有锚点，点击之后能够直接到错误的位置，节省用户寻找的时间。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">然而如之前所说，如果能够在前台即时校验的信息，就尽量交给前台校验，除了可以节省用户的表单操作时间，可以保证体验的一致。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><strong>5. 智能默认</strong></h4><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">（图示5：淘宝/天猫购物车页面，图中敏感数据已经抹去）</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><span class=\"wp_keywordlink_affiliate\">表单设计</span>中可以通过智能默认的方式帮助用户填写一些需要重复填写的表单，这样可以节省大量的时间。例如图中的淘宝/天猫购物车页面，用户在每次购买之后都需要经过收货地址填写环节，如果说将填写过的地址帮助用户保存起来并设置成默认，在后来的每次购买过程，可以直接进入到下一个环节，省去了这一步的时间。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><strong>6. 设置 Tab 键跳转</strong></h4><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">笔者认为 Tab 键跳转也是一个能够提高用户操作表单效率的一个方式，也是设计师在表单设计中必须要考虑到的一个细节，Tab 键的跳转和表单项视觉先后顺序保持一致。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">这个细节很小，但是影响面却很大。很多网站并没有在这个细节上做的很好。举个反面例子：</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">（图示6：支付宝收银台界面，图中敏感数据已经抹去）</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">上图是支付宝收银台的页面，分别来自于两个不同的电商网站。按照表单设计逻辑，在用户输入账户名按 Tab 键后，光标会自动聚焦到支付密码输入框中，然而左右两个界面却存在完全不一样的逻辑。左边页面在输入账户名之后按 Tab 键会直接跳到「忘记账户名？」这个链接上，而右边则一切正常。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><strong>7. 同意&amp;提交</strong></h4><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">在很多注册表单的最后一项表单项是让用户勾选同意***协议，很多情况下完全是废话。所以这一步与提交按钮可以合并在一起，省去一步操作。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">（图示7：网易邮箱的注册页面）</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><strong>8. 正在进行的动作</strong></h4><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">表单填写完成，最后一步就是提交了，这一步至关重要。不仅仅是说在提交之后要将后面的结果反馈给用户（上面说到的即时反馈），如果网络条件比较慢，或者信息量比较大，导致等待时间过长（很多情况下会这样），那么我们应该告诉用户这一切，让用户并不会觉得等待时间很长。同时也减少了用户重复点击「提交」按钮的情况。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/8hh201611.gif\" alt=\"8hh201611\" width=\"800\" height=\"600\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/8hh201611.gif\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">（图示8：提交按钮小动画）</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><strong>9. 对话形式表单</strong></h4><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">（图示9：对话式表单）</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">这算是一些附加信息。一个个表单项其实可以转化成一条条问题，让用户觉得像是在和互联网的另一边聊天，从而以最轻松愉悦的心情来进行表单填写。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><strong>总结</strong></h4><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">互联网在进化，表单也是如此，进化的同时，带给用户的是更高效的输入方式，更加轻松愉悦的使用体验。而设计师在设计过程中，应当将效率放在第一位，然后才是在效率至上的基础上去完善交互视觉的体验细节</p><p><br/></p>', '22'), ('', '', '<p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong><span style=\"font-size: 18px;\">『前言』</span></strong></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">前段时间，我入手了一只魅族 HD50 头戴式耳机，但是不免遇到了一个问题：头戴式耳机往哪儿摆。头戴式的耳机体积不免是大了一些，直接平摆在桌子上非常占位置，有时回到家使用就会占据我小桌子的很大空间。因此，我决定给它配一个耳机的支架。</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\"><br/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong><span style=\"font-size: 18px;\">『选购心路』</span></strong></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">我先是观察了一下耳机架的种类：从材质上分，主要可以分为木质和金属；从形状上分，主要可以分为T字型，7字型和Ω字型。所以，耳机架主要还是被分为了六大样式：</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"http://img.zealer.com/690/0/e4976005a840ab2560ce4ada793a41022c6.jpg\" title=\"1451824956689428.png\" alt=\"【晒桌面】小物品的情结--耳机支架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">虽然很多人喜欢木头的沉稳和岁月感，但是我个人是偏向喜欢金属的那种冷艳的感觉。如果说木支架有种岁月静好，现实安稳的宁静的感觉话，那金属支架便有种冷静至理性的冰冷感，就是喜欢这种冰冷的感觉。T字型的支架似乎是遵循了对称的美学，但是如果只挂上一只耳机，不免也失去了所谓的对称。最终，我还是选额了金属的7字型的支架。</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\"><br/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\"><strong><span style=\"font-size: 18px;\">『购置之路』</span></strong></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">选择完毕后，我便开始去TB上搜索我想要的款式。支架名牌和样式众多，让人难以抉择。后来，我发现了一款相对来说比较符合我审美的支架。</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"http://img.zealer.com/690/0/62938000be4ba7cdcb5c34df91d9ca93a30.jpg\" title=\"1451825545847835.jpg\" alt=\"【晒桌面】小物品的情结--耳机支架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">这个支架的顶端呈现出比较自然的弧线，相对一线直线条的产品还是能够带来一种平和的感觉，粗磨砂的设计虽然不如细磨砂那般精致，倒是凸显了一丝金属的张力。细磨砂似是女子化妆那般精致，而粗磨砂则是凸显原有的姿色，两者各有自身的韵味。</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"http://img.zealer.com/690/0/9699500123f66e7e0a08a0bd092e2e2150c.jpg\" title=\"1451826042282171.jpg\" alt=\"【晒桌面】小物品的情结--耳机支架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">在这个CNC高光边满地跑的世界里，不采用CNC高光边处理似乎有些落伍的感觉。但是没有了高光边却让这款耳机直接不会在桌子上有喧宾夺主的感觉。当手机市场的厂商把CNC玩得满地跑后，乍见这种原始的设计不免让人产生一种特别的感觉，一种原始的美感。</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"http://img.zealer.com/690/0/099fb003b84451ee8b4013aa324444ebba2.jpg\" title=\"1451827043650727.jpg\" alt=\"【晒桌面】小物品的情结--耳机支架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\">『金属与木，冷暖自知』</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">这个耳机支架还是需要自己安装一下的，好在过程不繁琐，而且本身的螺口也只有一个。上图是未经安装的耳机支架。</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\"><br/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\"><span style=\"font-size: 18px;\"><strong>『结语』</strong></span></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">当把这款耳机支架摆放在我的桌面上的时候，它和周围的一切都非常协调。它的存在，能够让人感知，但是又不会显得突兀和眨眼，这就是对于桌面小物品的理解。</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; text-align: center; background-color: rgb(255, 255, 255);\"><img src=\"http://img.zealer.com/690/0/1f99700c97cbb690995497e816444bd2b4b.jpg\" title=\"1451827275731272.jpg\" alt=\"【晒桌面】小物品的情结--耳机支架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p><br/></p>', '25'), ('', '', '<p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>界面清晰最重要</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">界面清晰是UI设计的第一步，要想让用户喜欢你设计的UI，首先必须让用户认可它、知道怎么样使用它。让用户在使用时预期会发生什么，并方便地与它交互。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal; text-align: center;\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02f781568360160000016d34262f24.jpg\" alt=\"02f781568360160000016d34262f24\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02f781568360160000016d34262f24.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜界面没有任何的操作提示，用户就明白通过左右滑动屏幕来查看更多卡片，还知道卡片是以扇形为运动轨迹。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>全力维护用户的注意力</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">在阅读的时候，总是会有事物分散我们的注意力。因此，在设计界面的时候，能够吸引用户的注意力很关键，千万不要将界面的周围设计得乱七八糟。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02b774568360070000016d346d53ab.png\" alt=\"02b774568360070000016d346d53ab\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02b774568360070000016d346d53ab.png\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜干净简洁的界面可以让用户更加沉浸在阅读的世界里。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>让界面处于用户的掌控之中</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">人类往往对能够掌控自己和周围的环境感到舒服，不考虑用户感受的设计往往会让这种舒适感消失。保证界面处于用户的掌控之中，让用户自己感受主动权。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/027c1c5683602b0000016d3426d10f.png\" alt=\"027c1c5683602b0000016d3426d10f\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/027c1c5683602b0000016d3426d10f.png\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;错误示范｜用户不知道如何查看很多的卡片，除了查看第一张卡片的详情，其他的卡片脱离了用户的掌控。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>直接操作的感觉最棒</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">当能够直接操作物体时，用户的感觉是最棒的。在设计界面时，我们增加的图标往往并不是必需的，比如我们过多的使用按钮、选项等等其他繁琐的东西仅仅是为了填满界面，这些都是画蛇添足。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/027b7e5683605b0000016d349169ed.jpg\" alt=\"027b7e5683605b0000016d349169ed\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/027b7e5683605b0000016d349169ed.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜图标的作用是以图形化的视觉形象给用户快速引导，如果只是装饰，就不如不要。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>每个屏幕只提供一个操作主题</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">我们设计的每一个画面都应该有单一的主题，这样不仅能够让用户使用到它真正的价值，也使得上手容易，使用起来也更方便。如果一个屏幕支持两个或两个以上的主题，立马会让整个界面看起来混乱不堪。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02bc70568360730000016d34ad344b.png\" alt=\"02bc70568360730000016d34ad344b\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02bc70568360730000016d34ad344b.png\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;错误示范｜这个界面是让用户输入登录，却将注册放在与登录同等重要的位置，干扰用户操作，会导致操作错误。比较好的做法是，将注册放在右下或登录按钮下方。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>界面过渡自然</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">界面的交互都是关联的，所以要认真地考虑到下一步的交互是怎样的，并且通过设计将其实现。当用户已经完成该做的步骤，不要让他们不知所措，给他们自然而然继续下去的方法，以达成目的。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/0250345683608f0000016d34796ac5.png\" alt=\"0250345683608f0000016d34796ac5\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/0250345683608f0000016d34796ac5.png\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜界面的交互非常清晰，点击向下展开，再次点击向上收起。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>表里如一</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">如果它看上去像个按钮，那么它就应该具备按钮的功能。设计师不应该在基本的交互问题上耍小聪明，要在更高层次的问题上发挥创造力。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02f277568360a50000016d34f25549.png\" alt=\"02f277568360a50000016d34f25549\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02f277568360a50000016d34f25549.png\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;错误示范｜界面非常漂亮，但登录被弱化，并且表现形式雷同输入的提示文字，用户不易察觉。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>区别对待一致性</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">如果屏幕元素各自的功能不同，那么它们的外观也理应不同。反之，如果功能相同或相近，那么它们看起来就应该是一样的。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/023fbd568360b90000016d340f8db1.png\" alt=\"023fbd568360b90000016d340f8db1\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/023fbd568360b90000016d340f8db1.png\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜元素排版整齐且统一，功能清晰明了。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>强烈的视觉层次感</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">强烈的视觉层次感是通过界面上视觉元素提供的清晰浏览顺序来实现的，也就是说，用户每次都能按照同一个顺序浏览同一些元素。弱化的视觉层次没有给用户提供如何浏览的线索，用户会感到困惑和混乱。当一切都是粗体时，就没有主次之分了。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/022619568360cd0000016d34d5a758.png\" alt=\"022619568360cd0000016d34d5a758\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/022619568360cd0000016d34d5a758.png\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜界面以用户的阅读习惯将层次拉开，从左到右，从上到下，元素之间互不干扰。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>恰当的组织UI能够降低认知难度</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">正如John Maeda在他的书中所说，对屏幕元素的恰当组织能够使页面显得简洁，这能够帮助用户更容易并且更快地理解你的界面。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/024ab0568360f00000016d348eaf08.jpg\" alt=\"024ab0568360f00000016d348eaf08\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/024ab0568360f00000016d348eaf08.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜将零散的元素进行组合，并以生活中常见的物品展示，用户更易理解。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>颜色不是决定性因素</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">物体的颜色会随着光线的变化而变化，颜色是一个变化的性质，不应该在界面上起决定性作用。它可以用于提醒，但是不应该是唯一的区分元素。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/021af3568361010000016d34a58165.png\" alt=\"021af3568361010000016d34a58165\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/021af3568361010000016d34a58165.png\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜通过鲜艳的色彩来提醒需要用户关注的内容，但是tiah不太认同颜色不能作为唯一的区分的观点，现在有很多天气、记事、时钟类APP极简的设计，常常采用色彩进行区分也非常赞。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>渐进展示</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">在每个屏幕上只显示必要的内容，如果用户在做选择，那么给他们显示足够的信息，然后在各自的页面上展示详情，避免在某个界面过度展示所有细节。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02f990568361120000016d347acf25.jpg\" alt=\"02f990568361120000016d347acf25\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02f990568361120000016d347acf25.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜用户只单纯地想播放音乐，所以列表页只需要当前播放状态、演唱者、专辑名和歌曲名，无需太多的信息。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>零状态的界面</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">第一次访问界面是最重要的，但经常被设计者忽视。为了帮助用户适应，应该提供启动的方向和引导。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02865f568361230000016d34a3c7b9.png\" alt=\"02865f568361230000016d34a3c7b9\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/02865f568361230000016d34a3c7b9.png\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜零状态结果本身对用户体验极其不好，更需要情感化或引导性的设计来降低用户焦躁的情绪。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>优秀的设计是无形的</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">优秀的设计是没有痕迹的，如果设计是成功的，那么用户可以只关注自己的目的，而不是界面，不依赖于界面。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/027b90568361330000016d34c54404.jpg\" alt=\"027b90568361330000016d34c54404\" width=\"400\" height=\"250\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/027b90568361330000016d34c54404.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;正确示范｜要想做到这点非常不易，tiah认为Yo做到了。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\"><strong>界面是被人使用的</strong></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">只有用户使用你设计的界面时，才是成功的。如果一件衣服很漂亮，但是穿起来不舒服，那么设计是失败的。</p><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/024539568361430000016d34787e9c.jpg\" alt=\"024539568361430000016d34787e9c\" width=\"400\" height=\"300\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2015/12/024539568361430000016d34787e9c.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">▲ &nbsp;错误示范｜视觉效果非常好，但是用户体验上非常糟糕，当前状态与主界面关联太弱，弧形轨迹阅读太累。</p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">以上举例图片来自dribbble，如对作者冒犯处敬请谅解</p><p><br/></p>', '23');
INSERT INTO `article_data` VALUES ('', '', '<p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">宇宙主题的网站则总能唤醒我们的好奇心。这类主题看似是一种限制，但是使用之类元素的网站并非都要与之直接相关，借助这类元素，网页在视觉和内容上确确实实得到了改善，用户也被它们所激励。那么我们来看看，这些元素和主题是如何被运用到<span class=\"wp_keywordlink_affiliate\">网页设计</span>中去的。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://ss16trendbook.minicool.net/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Minicool</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/1-Minicool.jpg\" alt=\"1-Minicool\" width=\"600\" height=\"303\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/1-Minicool.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">Minicool 是一个用漂亮插画填满的网站，作为一个儿童图书预售类的网站，这些想象力十足的可爱插画充满蜡笔质感，而行星、外星人的可爱形象为整体风格增色不少。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://easyrocketstudio.com/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Easy Rocket Studio</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/2-Easy-Rocket-Studio.jpg\" alt=\"2-Easy-Rocket-Studio\" width=\"600\" height=\"304\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/2-Easy-Rocket-Studio.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">Easy Rocket Studio 是一个全新的在线平台，它可以帮助各种体育项目赢得更多的收入。太空主题的页面设计非常符合这类项目所给人传递的情绪，科技感十足的设计也确实令人难忘。值得一体的是，首页使用了大量的矢量插图，使得在不同平台上看起来都很棒。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://www.alliwishyou.com/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">All I Wish You</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/3-All-I-Wish-You.jpg\" alt=\"3-All-I-Wish-You\" width=\"600\" height=\"295\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/3-All-I-Wish-You.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">All I Wish You 的页面是一个典型的强交互型的页面设计，不弱于任何一个基于Chrome 实验性功能的设计项目，无论是独创性还是性能控制。这些隐藏在行星间的“愿望”借助设计被完美地呈现出来，融入到宏大的宇宙场景之中。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://www.77diamonds.com/diamonds-in-the-sky/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Diamonds in the Sky</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/4-Diamonds-in-the-sky.jpg\" alt=\"4-Diamonds-in-the-sky\" width=\"600\" height=\"293\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/4-Diamonds-in-the-sky.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">和前面的案例类似，这个复杂而精致的页面灵感同样来自宇宙。网站允许你创建恒星、星座，并同其他的用户进行分享。虽然目前并不支持手机和平板的操作，但是仅桌面端的功能就已经很强大了。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://supportkyoto.org/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Support Kyoto</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/5-Support-Kyoto.jpg\" alt=\"5-Support-Kyoto\" width=\"600\" height=\"329\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/5-Support-Kyoto.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">这个网站采用了视差设计来构建令人难忘的浏览体验。在页面中，你可以站在地球的视角上查看不同位置的星空。和许多类似的项目一样，这个项目的实现也需要一大堆枯燥的数据，不过这些数据很好地服务于页面中的各个元素。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://air-social.com/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Air Social</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873683926357.jpg\" alt=\"6-Air-Social\" width=\"600\" height=\"349\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/6-Air-Social.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">Air Social 是一个华丽而细致的网站，漂亮的动效无处不在，也充分展现了光在这个页面中无与伦比的作用。网站从头到尾都紧紧的抓住了用户的注意力。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://mordillo.com/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Mordillo</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873685622936.jpg\" alt=\"7-Mordillo\" width=\"600\" height=\"324\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/7-Mordillo.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">Mordillo 的页面配色和风格充满了上个世纪80年代的气息，作为一个个人作品展示页，设计师的个性可以通过各个细节让你一览无遗。页面中隐藏着许多有趣的东西，你会在探索过程中逐步了解这名设计师。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://12wave.com/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">12 Wave</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873687571121.jpg\" alt=\"8-12-wave\" width=\"599\" height=\"277\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/8-12-wave.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">12 Wave 是一个高端的数字工作室，他们专精于为<span class=\"wp_keywordlink_affiliate\">网页设计</span>惊艳前卫的特效，配合细致的微互动。这个网页设计就是如此，令人充满惊喜的宇宙和星云，意想不到的细节，有趣的插画都融入其中。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://www.mooncampapp.com/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Moon Camp App</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873688149305.jpg\" alt=\"9-Moon-Camp-App\" width=\"600\" height=\"314\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/9-Moon-Camp-App.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">整个网站的设计作风非常扎实，效果的搭配给人印象也非常深刻。宇宙的主题和文字内容、细节元素都很好地融合到了一起。漂亮的图片、华丽的排版和精湛特效的紧密结合，让网站整体效果加分不少。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://vizua.sk/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Vizua</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873691861463.jpg\" alt=\"10-Vizua\" width=\"600\" height=\"365\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/10-Vizua.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">Vizua 网站的吉祥物就是一个可爱的外星人，Lowpoly 风的场景和吉祥物风格高度一致，这风格化的设计让荒芜单调的星球表面变得可爱了起来。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://brightmedia.pl/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">BrightMedia</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873693197261.jpg\" alt=\"11-BrightMedia\" width=\"599\" height=\"291\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/11-BrightMedia.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">宇宙主题在这个网站中被用作营造科技范儿氛围，华丽的线条和渐变的光晕配合精致的排版，点缀着点点星光，整个页面显得锐利而不单调。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://www.alquimiawrg.com/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Alquimia</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873695246212.jpg\" alt=\"12-Alquimia\" width=\"600\" height=\"289\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/12-Alquimia.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">Alquimia 倒不是大型的网站，但是网站的特效设计可以称得上无与伦比，重新设计的排版优雅地阐释了太空的主题。在相对干净清爽的黑色背景上，白色的星光显得非常耀眼。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://www.alessiosantangelo.it/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Alessio Santangelo</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873696942139.jpg\" alt=\"13-Alessio-Santangelo\" width=\"600\" height=\"299\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/13-Alessio-Santangelo.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">可以说设计师Alessio Santangelo 将他的灵魂整个都投放到自己的作品展示网站中去了，网页中脑洞大开的场景和美的令人窒息的质感都让人流连忘返。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://clipperdata.com/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Clipper Data</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873697620529.jpg\" alt=\"14-Clipper-Data\" width=\"600\" height=\"303\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/14-Clipper-Data.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">地球的剪影在太空看的时候是如此的瑰丽雄奇，作为网站的着陆页的时候，可以帮整个页面奠定基调。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://digitalwerk.agency/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">DigitalWerk</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873698688874.jpg\" alt=\"15-DigitalWerk\" width=\"600\" height=\"302\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/15-DigitalWerk.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">近乎黑白色调的地球被用作背景呈现在网站上，和前景的黄色图形构成了鲜明的对比，同时也营造出大气磅礴的氛围。设计师不仅善用这种明暗对比，而且在字体尺寸上的选取也体现出他对于大小对比的熟稔掌控。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://www.4por4.pt/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">4por4</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873699804145.jpg\" alt=\"16-4por4\" width=\"600\" height=\"289\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/16-4por4.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">醒目的多边形元素插画构建起了令人惊艳的宇宙场景，为了配合这种独特的风格，设计师在选取字体和配色上也非常用心。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://brandoncjohnson.com/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Brandon Jhonson</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873701566716.jpg\" alt=\"17-Brandon-Jhonson\" width=\"600\" height=\"299\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/17-Brandon-Jhonson.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">Brandon Jhonson 是一位行星科学家，而这些漂亮的星球细节特写和这个惊艳的网站相得益彰。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://firstlightfusion.com/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">First Light Fusion</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873703307143.jpg\" alt=\"18-First-Light-Fusion\" width=\"600\" height=\"292\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/18-First-Light-Fusion.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">蓝色的地球为整个网站设定了基调，露出的一角的排版让整个首页充满了安静宁和的气息。配合着地球的插画，设计师加入了留白和锐利的文字来与之配合。</p><h4 style=\"margin: 5px 0px; font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; line-height: 20px; color: rgb(85, 85, 85); text-rendering: optimizeLegibility; font-size: 14px; white-space: normal;\"><a href=\"http://budoucnost.utb.cz/\" target=\"_blank\" style=\"color: rgb(66, 139, 202); text-decoration: none;\">Tomas Bata</a></h4><p style=\"text-align:center\"><img class=\"attachment-full\" src=\"/Upload/ueditor/image/20160104/1451873705304855.jpg\" alt=\"19-Tomas-Bata\" width=\"600\" height=\"277\" original=\"http://78rbeb.com1.z0.glb.clouddn.com/wp-content/uploads/2016/01/19-Tomas-Bata.jpg\" data-bd-imgshare-binded=\"1\" style=\"max-width: 860px; border-radius: 5px; height: auto; vertical-align: middle; border: 0px; padding: 5px; margin: auto; display: inline;\"/></p><p style=\"margin-top: 0px; margin-bottom: 15px; color: rgb(85, 85, 85); font-family: &#39;Microsoft Yahei&#39;, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 25px; white-space: normal;\">这个网站拥有一个充满神秘感的整体效果，炫酷的几何式排版让网站看起来非常有爱，也体现了网站宇宙的主题。</p><p><br/></p>', '24'), ('', '', '<p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">继上次晒完桌面后，再晒晒我的书架吧，以下是全景图；这架子是某宝买的，自己手工装的，当时差点没累死，一度后悔</p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">要退货，还好最后装上了。</p><p style=\"text-align:center\"><img src=\"/Upload/ueditor/image/20160104/1451902363341951.jpg\" title=\"1451707609846031.jpg\" alt=\"【晒桌面】第二弹-晒晒我的书架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">阳光下的 MBP 13，正在看大家的帖子；</p><p style=\"text-align:center\"><img src=\"/Upload/ueditor/image/20160104/1451902364326777.jpg\" title=\"1451707685800737.jpg\" alt=\"【晒桌面】第二弹-晒晒我的书架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">再次出境的 Bose soundlink mini 2，此时正在用它听着 Hit FM ；</p><p style=\"text-align:center\"><img src=\"/Upload/ueditor/image/20160104/1451902365259383.jpg\" title=\"1451707754584187.jpg\" alt=\"【晒桌面】第二弹-晒晒我的书架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">超级喜欢美队，就淘了一个手办放架子上了；</p><p style=\"text-align:center\"><img src=\"/Upload/ueditor/image/20160104/1451902366520231.jpg\" title=\"1451707855471978.jpg\" alt=\"【晒桌面】第二弹-晒晒我的书架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">美亚上看到便宜就淘了一个忍者神龟；</p><p style=\"text-align:center\"><img src=\"/Upload/ueditor/image/20160104/1451902366571329.jpg\" title=\"1451707895364198.jpg\" alt=\"【晒桌面】第二弹-晒晒我的书架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">瑞士军刀“工作冠军”&amp;“攀登者”，当时特别喜欢瑞士军刀，剩下的是一些倒腾系统时候用的 U 盘；</p><p style=\"text-align:center\"><img src=\"/Upload/ueditor/image/20160104/1451902367153077.jpg\" title=\"1451707950935898.jpg\" alt=\"【晒桌面】第二弹-晒晒我的书架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">这陈列的是我的第一个苹果设备 Touch 4、IP4S、IP5 ; 放在这看着也挺舒服；</p><p style=\"text-align:center\"><img src=\"/Upload/ueditor/image/20160104/1451902368705405.jpg\" title=\"1451708030540796.jpg\" alt=\"【晒桌面】第二弹-晒晒我的书架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">在超市淘了一个简单收纳箱，放些我的杂乱物品...</p><p style=\"text-align:center\"><img src=\"/Upload/ueditor/image/20160104/1451902368244972.jpg\" title=\"1451708086107205.jpg\" alt=\"【晒桌面】第二弹-晒晒我的书架\" class=\"big\" style=\"border: 0px; max-width: 690px; margin: 25px 0px; cursor: zoom-in;\"/></p><p style=\"margin-top: 0px; margin-bottom: 0px; padding: 0px; color: rgb(49, 52, 59); font-family: &#39;Helvitica Neue&#39;, Helvitica, Arial, &#39;Hiragino Sans GB&#39;, &#39;Microsoft YaHei&#39;, &#39;Microsoft JhengHei&#39;, sans-serif; line-height: 28.8px; white-space: normal; background-color: rgb(255, 255, 255);\">就是这样啦，计划明年装修下，继续折腾~</p><p><br/></p>', '26');
COMMIT;

-- ----------------------------
--  Table structure for `article_tag`
-- ----------------------------
DROP TABLE IF EXISTS `article_tag`;
CREATE TABLE `article_tag` (
  `article_aid` int(10) unsigned NOT NULL DEFAULT '0',
  `tag_tid` int(10) unsigned NOT NULL DEFAULT '0',
  KEY `fk_article_tag_article1_idx` (`article_aid`),
  KEY `fk_article_tag_tag1_idx` (`tag_tid`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='文章标签中间表';

-- ----------------------------
--  Records of `article_tag`
-- ----------------------------
BEGIN;
INSERT INTO `article_tag` VALUES ('19', '10'), ('24', '8'), ('23', '13'), ('18', '14'), ('18', '13'), ('17', '12'), ('16', '12'), ('22', '13'), ('24', '13'), ('21', '13'), ('22', '10'), ('19', '4'), ('24', '10'), ('20', '13'), ('19', '13'), ('24', '4'), ('22', '4'), ('23', '10'), ('23', '4'), ('25', '12'), ('25', '14'), ('26', '14'), ('26', '12');
COMMIT;

-- ----------------------------
--  Table structure for `category`
-- ----------------------------
DROP TABLE IF EXISTS `category`;
CREATE TABLE `category` (
  `cid` smallint(5) unsigned NOT NULL AUTO_INCREMENT,
  `cname` char(20) NOT NULL DEFAULT '' COMMENT '分类名称',
  `ctitle` varchar(120) NOT NULL DEFAULT '' COMMENT '分类的title,作so',
  `cdes` varchar(200) NOT NULL DEFAULT '' COMMENT '分类的描述,做seo',
  `ckeywords` char(150) NOT NULL,
  `pid` smallint(6) NOT NULL DEFAULT '0' COMMENT '父级pid',
  `csort` smallint(5) unsigned NOT NULL DEFAULT '0' COMMENT '排序字段',
  PRIMARY KEY (`cid`)
) ENGINE=MyISAM AUTO_INCREMENT=22 DEFAULT CHARSET=utf8 COMMENT='分类表';

-- ----------------------------
--  Records of `category`
-- ----------------------------
BEGIN;
INSERT INTO `category` VALUES ('10', 'App UI', 'App UIApp UI', 'App UI', 'App UI', '21', '100'), ('18', '程序', '程序', '新闻', '新闻', '0', '95'), ('19', '极客', '极客', '极客', '极客', '0', '98'), ('21', 'UI', 'UI', 'UI', 'UI', '0', '96'), ('20', 'web UI', 'web UI', 'web UI', 'web UI', '21', '100');
COMMIT;

-- ----------------------------
--  Table structure for `comment`
-- ----------------------------
DROP TABLE IF EXISTS `comment`;
CREATE TABLE `comment` (
  `coid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `content` varchar(255) NOT NULL DEFAULT '' COMMENT '评论内容',
  `addtime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '评论时间',
  `article_aid` int(10) unsigned NOT NULL DEFAULT '0',
  PRIMARY KEY (`coid`),
  KEY `fk_comment_article1_idx` (`article_aid`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COMMENT='文章评论表';

-- ----------------------------
--  Table structure for `link`
-- ----------------------------
DROP TABLE IF EXISTS `link`;
CREATE TABLE `link` (
  `lid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `lname` char(40) NOT NULL DEFAULT '' COMMENT '链接名称',
  `addtime` int(10) unsigned NOT NULL DEFAULT '0' COMMENT '添加时间',
  `logo` varchar(120) NOT NULL DEFAULT '' COMMENT 'logo',
  `url` char(150) NOT NULL DEFAULT '' COMMENT '地址',
  `sort` smallint(5) unsigned NOT NULL DEFAULT '0' COMMENT '排序',
  PRIMARY KEY (`lid`)
) ENGINE=MyISAM AUTO_INCREMENT=11 DEFAULT CHARSET=utf8 COMMENT='友情链接表';

-- ----------------------------
--  Records of `link`
-- ----------------------------
BEGIN;
INSERT INTO `link` VALUES ('4', '百度', '1451439495', 'Upload/10231451439495_thumb.png', 'http://www.baidu.com', '95'), ('5', 'ZEALER', '1451439698', 'Upload/13871451439698_thumb.png', 'http://www.zealer.com', '97'), ('6', '大前端', '1451439930', 'Upload/1331451439930_thumb.png', 'http://www.daqianduan.com', '98');
COMMIT;

-- ----------------------------
--  Table structure for `tag`
-- ----------------------------
DROP TABLE IF EXISTS `tag`;
CREATE TABLE `tag` (
  `tid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `tname` char(25) NOT NULL DEFAULT '' COMMENT '标签名称',
  PRIMARY KEY (`tid`)
) ENGINE=MyISAM AUTO_INCREMENT=15 DEFAULT CHARSET=utf8 COMMENT='标签表';

-- ----------------------------
--  Records of `tag`
-- ----------------------------
BEGIN;
INSERT INTO `tag` VALUES ('1', '热门'), ('8', 'JavaScript'), ('3', 'PHP'), ('4', 'CSS3'), ('9', 'Ajax'), ('10', 'CSS'), ('11', 'MySql'), ('12', '桌面文化'), ('13', 'UI'), ('14', '拍客');
COMMIT;

-- ----------------------------
--  Table structure for `user`
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
  `uid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `username` char(20) NOT NULL DEFAULT '' COMMENT '用户名',
  `password` char(32) NOT NULL DEFAULT '' COMMENT '密码',
  PRIMARY KEY (`uid`)
) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8 COMMENT='用户表';

-- ----------------------------
--  Records of `user`
-- ----------------------------
BEGIN;
INSERT INTO `user` VALUES ('2', 'admin', '21232f297a57a5a743894a0e4a801fc3');
COMMIT;

-- ----------------------------
--  Table structure for `webset`
-- ----------------------------
DROP TABLE IF EXISTS `webset`;
CREATE TABLE `webset` (
  `wid` int(10) unsigned NOT NULL AUTO_INCREMENT,
  `name` varchar(45) NOT NULL DEFAULT '' COMMENT '配置名称',
  `value` varchar(100) NOT NULL DEFAULT '' COMMENT '配置项名称',
  `title` varchar(255) NOT NULL DEFAULT '' COMMENT '配置的标题',
  `type_id` tinyint(3) unsigned NOT NULL DEFAULT '0' COMMENT '类型id',
  PRIMARY KEY (`wid`)
) ENGINE=MyISAM AUTO_INCREMENT=9 DEFAULT CHARSET=utf8 COMMENT='网站配置表';

-- ----------------------------
--  Records of `webset`
-- ----------------------------
BEGIN;
INSERT INTO `webset` VALUES ('1', 'webname', 'TARQAT', '网站名称', '1'), ('2', 'copy', '© 2010-2016 知识传播', '版权', '1'), ('3', 'adminemail', '1027820779@qq.com', '邮箱', '3'), ('4', 'code_len', '4', '长度', '2'), ('5', 'code_color', '#fff', '颜色', '2'), ('6', 'adminweixin', '13201223537', '微信', '3'), ('7', 'adminweibo', '铁打的新疆人', '微博', '3'), ('8', 'adminqq', '1027820779', 'QQ', '3');
COMMIT;

SET FOREIGN_KEY_CHECKS = 1;
